<template>
	<view>
		<u-navbar title="订单详情" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		<view class="steps">
			<view class="steps-box">
				<u-steps :list="stepList" :current="stepActive" mode="number"></u-steps>
			</view>
		</view>
		<view class="container">
			<step1 v-if="stepActive == 0" :orderId="orderId" :detail="orderDetail"></step1>
			<step2 v-if="stepActive == 1" :orderId="orderId" :detail="orderDetail"></step2>
			<step3 ref="step3" v-if="stepActive == 2" :orderId="orderId" :detail="orderDetail" @confirm="getOrderDetail"></step3>
			<step4 v-if="stepActive == 3" :orderId="orderId" :detail="orderDetail"></step4>
			<step5 v-if="stepActive == 4" :orderId="orderId" :detail="orderDetail"></step5>
		</view>
	</view>
</template>

<script>
	import step1 from "../../components/order/step1.vue"
	import step2 from "../../components/order/step2.vue"
	import step3 from "../../components/order/step3.vue"
	import step4 from "../../components/order/step4.vue"
	import step5 from "../../components/order/step5.vue"
	export default{
		components:{step1,step2,step3,step4,step5},
		data(){
			return{
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				//步骤
				stepList:[{name:'下单'},{name:'审核'},{name:'发货'},{name:'验货'},{name:'结算'}],
				stepActive:1,
				orderDetail:null,
				orderId: ''
			}
		},
		onLoad(options){
			this.orderId = options.id
		},
		onShow() {
			this.getOrderDetail()
		},
		methods:{
			getOrderDetail(){
				uni.showLoading({mask:true})
				this.$u.api.getOrderDetail(this.orderId).then(res => {
					if(res.code != 0){
						uni.hideLoading()
						this.$u.toast(res.msg)
						return false
					}
					let data = res.data
					if (data.status == 0) this.stepActive = 0
					if (data.status == 2) this.stepActive = 1
					if(data.status == 3) this.stepActive = 2
					if(data.status == 4) this.stepActive = 3
					if(data.status == 6) this.stepActive = 4
					
					this.orderDetail = data
					uni.hideLoading()
				}).catch(()=>{uni.hideLoading()})
			},
			orderConfirm(){
				uni.showLoading({mask:true})
				this.$u.api.confirmOrder({
					id:this.orderId,
					rejectReason:"",
					status:6
				}).then(res => {
					if(res.code != 0){
						uni.hideLoading()
						this.$u.toast(res.msg)
						return false
					}
					uni.hideLoading()
					this.getOrderDetail()
				}).catch(()=>{uni.hideLoading()})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.steps{
		position: fixed;
		left: 0;
		right: 0;
		background: rgba(0, 130, 255, 1);
		box-shadow: 0px 24rpx 64rpx -40rpx rgba(38,29,80,0.15);
		padding:20rpx 30rpx;
		z-index: 99;
		.steps-box{
			padding: 20rpx 0;
			background: #FFFFFF;
			border-radius: 16rpx;
		}
		
	}
	.container{
		padding:170rpx 30rpx 0;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
